<template>
    <div id="lywj" class="container-fluid padding">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>录音文件列表</legend>
        </fieldset>
        <el-form :model="searchData" :inline="true" ref="searchData" label-width="100px" class="padding">
            <el-form-item label="来自电话" prop="from">
                <el-input v-model="searchData.from" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="接听电话" prop="to">
                <el-input v-model="searchData.to" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="坐席号" prop="zuoxi">
                <el-input v-model="searchData.zuoxi" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="创建时间区间" prop="sjqj">
                <el-date-picker style="width: 714px;"
                                v-model="searchData.sjqj"
                                type="datetimerange"
                                placeholder="选择时间范围"
                                value-format="timestamp"
                                align="right">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="  ">
                <el-button type="primary" @click="search()">查询</el-button>
                <el-button @click="$refs['searchData'].resetFields()">重置</el-button>
            </el-form-item>
        </el-form>
        <table class="layui-hide" id="lywjFilelist" lay-filter="lywjFilelist"></table>
        <a id="download" rel="nofollow" hidden><i id="download_i" ></i></a>
        <audio controls="controls" id="sound" hidden>
        </audio>
        <script type="text/html" id="fileBar">
          <button class="el-button el-button--success el-button--mini is-round" lay-event="play" >听取</button>
          <button class="el-button el-button--primary el-button--mini is-round" lay-event="download" >下载</button>
          <button class="el-button el-button--danger el-button--mini is-round" lay-event="pause" >暂停</button>
        </script>
    </div>
</template>

<script>
    import {formatDateTime} from '../../../../common/js/util';
    export default {
        name: "lywj",
        beforeCreate: function(){
            this.$nextTick(function () {
                // 坐席的表格数据,首次加载出来dom
                layui.use('table');
                // 坐席文件的上传
                layui.use('upload');
            });
        },
        updated: function(){
            this.$nextTick(function () {
            });
        },
        methods:{
            search:function() {
                layui.table.render({
                    elem: '#lywjFilelist'
                    , height: 600
                    , totalRow: true
                    , toolbar: '#fileToolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                    , url: burl + 'cti-manager-ly/search-file-list/' //数据接口
                    , where:{CtiCdrWavSearch:this.searchData}
                    , page: true //开启分页
                    , method:'post'
                    , cols: [this.file_table_head]
                    , done: function (res) {
                        this.params = res.params;
                    }
                });
            }
        },
        created:function(){
            this.$nextTick(function () {
                // 再次加载出表格数据（之前已经加载出来了dom数据）
                layui.use('table', ()=>{//加这个是防止刷新的时候会出现不存在render方法
                    // 再次加载出表格数据（之前已经加载出来了dom数据）
                    layui.table.render({
                        elem: '#lywjFilelist'
                        , height: 600
                        , totalRow: true
                        , toolbar: '#fileToolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                        , url: burl + 'cti-manager-ly/file-list/' //数据接口
                        , page: true //开启分页
                        , cols: [this.file_table_head]
                        , done: function (res) {
                            this.params = res.params;
                        }
                    });
                    //监听行工具事件
                    layui.table.on('tool(lywjFilelist)', (obj)=>{
                        switch(obj.event){
                            case 'play':
                                $('#sound').attr('src',obj.data.httpPath);
                                var sound = $('#sound')[0];
                                sound.loop = false;
                                sound.play();
                                break;
                            case 'download':
                                var str=obj.data.httpPath;
                                var temp=str.lastIndexOf("/");
                                this.$my_.downloadFile(str.substr(temp+1),obj.data.httpPath)
                                break;
                            case 'pause':
                                $('#sound')[0].pause()
                                break;
                        };
                    });
                });
            });
        },
        data() {
            return {
                file_table_head:[
                    {field: 'absPath',  title: '绝对路径',width:300, sort: true},
                    {field: 'httpPath',  title: '网络路径',width:300, sort: true},
                    {field: 'httpPath',  title: '文件名字', width:220,sort: true,templet: function(res){var str=res.httpPath;var obj=str.lastIndexOf("/");return str.substr(obj+1);}},
                    {field: 'uuid',  title: '通道id', width:200,sort: true},
                    {field: 'from',  title: '来自电话', width:200, sort: true},
                    {field: 'to',  title: '接听电话', width:200, sort: true},
                    {field: 'zuoxi',  title: '接听坐席', width:140, sort: true},
                    {field: 'createTime',title: '拨打时间',width:240,sort: true,templet: function(res){return formatDateTime(res.createTime);}},
                    {fixed: 'right',width: 225,align:'center',templet:"#fileBar"},
                ],
                params:{},
                searchData:{
                    from:'',
                    to:'',
                    zuoxi:'',
                    sjqj:'',
                }
            }
        },
    }
</script>
